<template>
  <!-- 确认地址  -->
  <div class="conadd">
    <!-- 顶部返回栏 -->
    <van-nav-bar
      title="请选择收货地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-address-list
      :list="list"
      v-model="chosenAddressId"
      disabled-text="商品信息"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="togleItem"
      class="posi"
    >
      <template #default>
        <van-card
          v-for="item in carInfo"
          :key="item.id"
          :num="item.amount"
          :price="item.product.price"
          desc="描述信息"
          title="商品标题"
          :thumb="item.product.coverImage | diaImg"
        />
        <van-button type="primary" block round class="mg10" @click="submitInfo"
          >提交订单</van-button
        >
      </template>
    </van-address-list>
  </div>
</template>

<script>
import { Toast } from "vant";
// import { mapState, mapMutations } from "vuex";

import { mapMutations } from "vuex";
import { PostOrderAPI } from "@/services/order";
export default {
  name: "conAddress",
  data() {
    return {
      // 存储的是收货地址信息，通过点击获取
      info: {},
      chosenAddressId: "",
      // 存储购物车页面传过来的商品信息
      carInfo: [],
    };
  },
  computed: {
    list: {
      get() {
        return this.$store.state.address.list;
      },
      set(v) {
        this.$store.state.address.list = v;
      },
    },
  },
  created() {
    //调用初始化方法,取出本地存储的地址信息
    if(localStorage.getItem("CartInfo")) {
         this.carInfo = JSON.parse(localStorage.getItem("CartInfo"));
    } else {
       this.carInfo = [];
    }
    this.init();
    if (this.list.length > 0) {
       console.log(this.list.length);
      //  this.carInfo =
      this.chosenAddressId = this.list[0].id;
      this.info = this.list[0];
    } else {
        Toast("请添加地址");
    }
  },
  methods: {
    onAdd() {
      Toast("新增地址");
      this.$router.push({
        name: "Address",
      });
    },
    ...mapMutations("address", {
      init: "init",
      Edit: "Edit",
    }),
    onEdit(item, index) {
      console.log(item.id);
      this.$router.push({
        name: "AddressEdit",
      });
      this.Edit(item.id);
      Toast("编辑地址:" + index);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    togleItem(item, index) {
      this.info = item;
      console.log(item);
      console.log(index);
    },
    /**  @Object 对象的 @getOwnPropertyNames 方法，获取到对象中的属性名，
    存到一个数组中，返回数组对象，我们可以通过判断数组的
     length 来判断此对象是否为空。
      */
    submitInfo() {
      if (Object.values(this.carInfo).length> 0) {
        // 将需要提交订单的项抽取出来
        let products = this.carInfo.map((item) => {
            return { product: item.product.id, amount: item.amount };
        });
        let orderInfo = {
          products,
          receiver: this.info.name,
          address: this.info.address,
        };
        PostOrderAPI(orderInfo).then((res) => {
          if (res.code == 1) {
            this.$store.dispatch("cartsCount/getcars");
            Toast.success("订单提交成功");
            this.$router.push({
              name: "OrderSuccess",
            });
            //  this.carInfo = [];
            localStorage.removeItem("CartInfo");
            this.carInfo = [];
          } 
        });
        console.log(this.info);
      } else {
        Toast("呦!地址被外星人劫持了,请先添加一个地址吧!");
      }
    },
  },
  watch: {
    chosenAddressId(val) {
       console.log(val);
    },
  },
};
</script>

<style scoped>
.mg10 {
  position: fixed;
  bottom: 50px;
  width: 93%;
}
.posi {
  overflow: auto;
}
</style>
